<template>
  <div class="operation-log">
    <div class="page-header">
      <h2>操作日志管理</h2>
      <p>统一管理系统内所有操作记录，支持多维度查询和筛选</p>
    </div>
    <el-card class="search-card">
      <el-form :model="searchForm" inline>
        <el-form-item label="操作时间">
          <el-date-picker v-model="searchForm.dateRange" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
        </el-form-item>
        <el-form-item label="模块">
          <el-select v-model="searchForm.module" style="width: 140px">
            <el-option v-for="m in moduleOptions" :key="m" :label="m" :value="m" />
          </el-select>
        </el-form-item>
        <el-form-item label="操作类型">
          <el-select v-model="searchForm.type" clearable placeholder="请选择类型" style="width: 140px">
            <el-option label="全部" value="" />
            <el-option label="新增" value="create" />
            <el-option label="修改" value="update" />
            <el-option label="删除" value="delete" />
            <el-option label="登录" value="login" />
            <el-option label="登出" value="logout" />
            <el-option label="导入" value="导入" />
            <el-option label="导出" value="导出" />
            <el-option label="审核" value="审核" />
            <el-option label="拒绝" value="拒绝" />
            <el-option label="查询" value="查询" />
            <el-option label="升级" value="升级" />
            <el-option label="冻结" value="冻结" />
            <el-option label="上架" value="上架" />
            <el-option label="下架" value="下架" />
            <el-option label="发放" value="发放" />
            <el-option label="取消" value="取消" />
            <el-option label="盘点" value="盘点" />
            <el-option label="回复" value="回复" />
            <el-option label="关闭" value="关闭" />
            <el-option label="退出" value="退出" />
          </el-select>
        </el-form-item>
        <el-form-item label="操作人">
          <el-input v-model="searchForm.user" placeholder="请输入操作人" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchLogs">搜索</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="log-card">
      <el-table :data="pagedLogs" stripe style="width: 100%">
        <el-table-column prop="time" label="操作时间" width="180" />
        <el-table-column prop="user" label="操作人" width="120" />
        <el-table-column prop="module" label="模块" width="120" />
        <el-table-column prop="type" label="类型" width="100" />
        <el-table-column prop="desc" label="描述" min-width="200" />
        <el-table-column prop="ip" label="IP" width="120" />
        <el-table-column prop="status" label="状态" width="80" />
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <el-button size="small" @click="showDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="mt-3"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="filteredLogs.length"
        :page-size="pageSize"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog v-model="detailVisible" title="日志详情" width="500px">
      <el-descriptions :column="1" border v-if="currentLog">
        <el-descriptions-item label="操作时间">{{ currentLog.time }}</el-descriptions-item>
        <el-descriptions-item label="操作人">{{ currentLog.user }}</el-descriptions-item>
        <el-descriptions-item label="模块">{{ currentLog.module }}</el-descriptions-item>
        <el-descriptions-item label="类型">{{ currentLog.type }}</el-descriptions-item>
        <el-descriptions-item label="描述">{{ currentLog.desc }}</el-descriptions-item>
        <el-descriptions-item label="IP">{{ currentLog.ip }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ currentLog.status }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'

const moduleOptions = [
  '全部',
  '会员管理',
  '商品管理',
  '订单管理',
  '优惠券管理',
  '积分管理',
  '客服管理',
  '仓储管理',
  '基础设置',
]

const searchForm = reactive({
  dateRange: [],
  type: '',
  user: '',
  module: '全部',
})

const logs = ref([
  // 会员管理
  { time: '2024-06-01 09:00:00', user: '张三', module: '会员管理', type: '新增', desc: '新增会员：王小明', ip: '192.168.1.10', status: '成功' },
  { time: '2024-06-01 09:10:00', user: '李四', module: '会员管理', type: '修改', desc: '修改会员手机号：王小明', ip: '192.168.1.11', status: '成功' },
  { time: '2024-06-01 09:20:00', user: '张三', module: '会员管理', type: '升级', desc: '会员等级升级：王小明', ip: '192.168.1.10', status: '成功' },
  { time: '2024-06-01 09:30:00', user: '李四', module: '会员管理', type: '冻结', desc: '冻结会员账号：李大华', ip: '192.168.1.11', status: '成功' },

  // 商品管理
  { time: '2024-06-01 10:00:00', user: '王五', module: '商品管理', type: '新增', desc: '新增商品：iPhone 15', ip: '192.168.1.12', status: '成功' },
  { time: '2024-06-01 10:10:00', user: '王五', module: '商品管理', type: '修改', desc: '修改商品价格：iPhone 15', ip: '192.168.1.12', status: '成功' },
  { time: '2024-06-01 10:20:00', user: '王五', module: '商品管理', type: '上架', desc: '上架商品：iPhone 15', ip: '192.168.1.12', status: '成功' },
  { time: '2024-06-01 10:30:00', user: '王五', module: '商品管理', type: '下架', desc: '下架商品：iPhone 14', ip: '192.168.1.12', status: '成功' },

  // 订单管理
  { time: '2024-06-01 11:00:00', user: '赵六', module: '订单管理', type: '新增', desc: '新增订单：#20240601001', ip: '192.168.1.13', status: '成功' },
  { time: '2024-06-01 11:10:00', user: '赵六', module: '订单管理', type: '修改', desc: '修改订单收货地址：#20240601001', ip: '192.168.1.13', status: '成功' },
  { time: '2024-06-01 11:20:00', user: '赵六', module: '订单管理', type: '取消', desc: '取消订单：#20240601002', ip: '192.168.1.13', status: '成功' },

  // 优惠券管理
  { time: '2024-06-01 12:00:00', user: '钱七', module: '优惠券管理', type: '新增', desc: '新增优惠券：618满减券', ip: '192.168.1.14', status: '成功' },
  { time: '2024-06-01 12:10:00', user: '钱七', module: '优惠券管理', type: '发放', desc: '发放优惠券：618满减券', ip: '192.168.1.14', status: '成功' },
  { time: '2024-06-01 12:20:00', user: '钱七', module: '优惠券管理', type: '删除', desc: '删除优惠券：2024新客券', ip: '192.168.1.14', status: '成功' },

  // 积分管理
  { time: '2024-06-01 13:00:00', user: '孙八', module: '积分管理', type: '新增', desc: '新增积分规则：签到送积分', ip: '192.168.1.15', status: '成功' },
  { time: '2024-06-01 13:10:00', user: '孙八', module: '积分管理', type: '审核', desc: '审核积分兑换申请：#1001', ip: '192.168.1.15', status: '成功' },

  // 客服中心
  { time: '2024-06-01 14:00:00', user: '周九', module: '客服管理', type: '新增', desc: '新增工单：#T20240601', ip: '192.168.1.16', status: '成功' },
  { time: '2024-06-01 14:10:00', user: '周九', module: '客服管理', type: '回复', desc: '回复工单：#T20240601', ip: '192.168.1.16', status: '成功' },
  { time: '2024-06-01 14:20:00', user: '周九', module: '客服管理', type: '关闭', desc: '关闭工单：#T20240601', ip: '192.168.1.16', status: '成功' },

  // 仓储中心
  { time: '2024-06-01 15:00:00', user: '吴十', module: '仓储管理', type: '新增', desc: '新增库位：A-01', ip: '192.168.1.17', status: '成功' },
  { time: '2024-06-01 15:10:00', user: '吴十', module: '仓储管理', type: '盘点', desc: '盘点库存：A-01', ip: '192.168.1.17', status: '成功' },

  // 基础设置
  { time: '2024-06-01 16:00:00', user: '郑十一', module: '基础设置', type: '新增', desc: '新增员工：李明', ip: '192.168.1.18', status: '成功' },
  { time: '2024-06-01 16:10:00', user: '郑十一', module: '基础设置', type: '修改', desc: '修改角色权限：客服', ip: '192.168.1.18', status: '成功' },
  { time: '2024-06-01 16:20:00', user: '郑十一', module: '基础设置', type: '登录', desc: '登录系统', ip: '192.168.1.18', status: '成功' },
  { time: '2024-06-01 16:30:00', user: '郑十一', module: '基础设置', type: '退出', desc: '退出系统', ip: '192.168.1.18', status: '成功' },
])

const detailVisible = ref(false)
const currentLog = ref<any>(null)

// 分页相关
const pageSize = ref(10)
const currentPage = ref(1)

const filteredLogs = computed(() => {
  return logs.value.filter(item => {
    // 按类型
    const typeMatch = !searchForm.type || item.type === searchForm.type
    // 按操作人
    const userMatch = !searchForm.user || item.user.includes(searchForm.user)
    // 按模块
    const moduleMatch = searchForm.module === '全部' || item.module === searchForm.module
    return typeMatch && userMatch && moduleMatch
  })
})

const pagedLogs = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredLogs.value.slice(start, end)
})

function fetchLogs() {
  currentPage.value = 1 // 搜索后回到第一页
}
function resetForm() {
  searchForm.dateRange = []
  searchForm.type = ''
  searchForm.user = ''
  searchForm.module = '全部'
  fetchLogs()
}
function showDetail(row: any) {
  currentLog.value = row
  detailVisible.value = true
}
function handleSizeChange(size: number) {
  pageSize.value = size
  currentPage.value = 1
}
function handleCurrentChange(page: number) {
  currentPage.value = page
}
</script>

<style scoped>
.operation-log {
  padding: 20px;
}
.page-header {
  margin-bottom: 20px;
}
.page-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}
.page-header p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}
.search-card {
  margin-bottom: 20px;
}
.log-card {
  margin-bottom: 20px;
}
.mt-3 {
  margin-top: 20px;
}
</style> 